<template>
  <div>
    <button @click="infoClick">info:{{ info }}</button>
    <button @click="infoAgeClick">infoAge:{{ infoAge }}</button>
    <button>infoName:{{ infoName }}</button>
    <button>propsName:{{ propsName }}</button>
    <button>myPorpsName:{{ myPorpsName }}</button>
  </div>
</template>

<script setup>
import { reactive, ref, watch, isRef, unref, toRef, toRefs } from "vue";
const props = defineProps({
  propsName: {
    type: String,
    default: "propName",
  },
});
const info = reactive({
  name: "jdzhang",
  age: 18,
});

const infoClick = () => {
  info.age++;
  info.name += "a";
};
// 基于响应式对象上的一个属性，创建一个对应的 ref。
// 这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，
// 反之亦然(改变infoAge也会改变源属性)
const infoAge = toRef(info, "age", 300);
const infoAgeClick = () => {
  infoAge.value += 100;
};
// 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。
// 每个单独的 ref 都是使用 toRef() 创建的。
const { name: infoName } = toRefs(info);
// 可用于对proprs 的解构不失去响应式
const { propsName: myPorpsName } = toRefs(props);
</script>

<style scoped>
button {
  padding: 20px 20px;
  background-color: pink;
}
</style>
